<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    body,.box{
        background-image:url("./backgroundimg/卡通背景.jpg") ;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:100px 170px;
    }

    .box::before{
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    /* 这两个是重点 */
    filter: blur(10px);
    z-index: -1;
  }
  .tip{
      /* color:red; */
      margin-top:100px;
      font-size:25px;
      margin-left:100px;
  }

  .box{
    position:absolute;
    top:0;
    left:0;
    width:100%;
  }

    li {
        list-style: none;
    }

    button {
        border: none;
        background: none;
        outline: none;
    }

    .box {
        width: 100%;
    }

    .head {
        position: relative;
        width: 100%;
        height: 100px;
        background-color: rgba(17, 167, 247,.5);
        z-index:999;

    }

    h2 {
        text-align: center;
        line-height: 100px;
        height: 100px;
    }

    .center {
        position: relative;
        width: 100%;
        margin-top: 20px;
    }

    .center_wrap {
        width: 1000px;
        margin: 0 auto;
        display: flex;
    }

    .btn_city {
        position: relative;
        width: 300px;
        padding-left: 100px;
        box-sizing: border-box;
    }

    .title,.subject_title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100px;
        font-weight: bold;
    }
    .subject_title{
        top:343px;
    }

    .city_list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }

    .city_list li {
        width: 50px;
        margin-right: 5px;
        font-size: 14px;
        margin-bottom: 10px;
        cursor: pointer;
    }

    .city_list li a {
        color: #b0b0b0;
        padding-bottom: 5px;
        user-select: none;
    }

    .actived {
        color: red !important;
        text-decoration: underline;
    }

    a {
        text-decoration: none;
    }

    .img_wrap img {
        width: 700px;
        margin-top:-45px;
        opacity: .7;
    }
    .subject{
        margin-top:20px;
    }
    .footer{
        width:100%;
        height:230px;
        background: url("./backgroundimg/footer.png") no-repeat center/cover;
    }
</style>

<body>
    <div class="box">
        <div class="head">
            <h2>安徽工业大学往年各省市高考录取分数线</h2>
        </div>
        <div class="center">
            <div class="center_wrap">
                <div class="btn_city">
                    <!-- 城市文理选择 -->
                    <div class="btn_city_wrap">
                        <div class="title"><span>></span><span>招生地区</span></div>
                        <div class="btn_city_item">
                            <ul class="city_list">
                                <li><a class="actived" href="javascript:void(0)">北京</a></li>
                                <li><a href="javascript:void(0)">天津</a></li>
                                <li><a href="javascript:void(0)">辽宁</a></li>
                                <li><a href="javascript:void(0)">吉林</a></li>
                                <li><a href="javascript:void(0)">黑龙江</a></li>
                                <li><a href="javascript:void(0)">上海</a></li>
                                <li><a href="javascript:void(0)">江苏</a></li>
                                <li><a href="javascript:void(0)">浙江</a></li>
                                <li><a href="javascript:void(0)">安徽</a></li>
                                <li><a href="javascript:void(0)">福建</a></li>
                                <li><a href="javascript:void(0)">山东</a></li>
                                <li><a href="javascript:void(0)">湖北</a></li>
                                <li><a href="javascript:void(0)">湖南</a></li>
                                <li><a href="javascript:void(0)">广东</a></li>
                                <li><a href="javascript:void(0)">重庆</a></li>
                                <li><a href="javascript:void(0)">四川</a></li>
                                <li><a href="javascript:void(0)">陕西</a></li>
                                <li><a href="javascript:void(0)">甘肃</a></li>
                                <li><a href="javascript:void(0)">河北</a></li>
                                <li><a href="javascript:void(0)">山西</a></li>
                                <li><a href="javascript:void(0)">内蒙古</a></li>
                                <li><a href="javascript:void(0)">河南</a></li>
                                <li><a href="javascript:void(0)">海南</a></li>
                                <li><a href="javascript:void(0)">广西</a></li>
                                <li><a href="javascript:void(0)">贵州</a></li>
                                <li><a href="javascript:void(0)">云南</a></li>
                                <li><a href="javascript:void(0)">西藏</a></li>
                                <li><a href="javascript:void(0)">青海</a></li>
                                <li><a href="javascript:void(0)">宁夏</a></li>
                                <li><a href="javascript:void(0)">新疆</a></li>
                                <li><a href="javascript:void(0)">江西</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="subject">
                        <div class="subject_title"><span>></span><span>文理分科</span></div>
                        <ul class="subject_list">
                            <li><a class='actived' href="javascript:void(0)">理科</a></li>
                        </ul>
                    </div>
                </div>
                <!-- 分数图片展示 -->
                <div class="img_wrap">
                    <img src=".//graph//北京.png" alt="">
                    <div class="tip"></div>
                </div>
            </div>
        </div>
        <div class="footer">

        </div>
    </div>
</body>

</html>
<script>
    let textCity = document.querySelectorAll(".city_list li a");
    let img = document.querySelector(".img_wrap img");
    let tip = document.querySelector('.tip')
    for (let i = 0; i < textCity.length; i++) {
        textCity[i].onclick = function (e) {
            for (let i = 0; i < textCity.length; i++) {
                let att = textCity[i].getAttribute('class');
                if (att) {
                    textCity[i].classList.remove('actived')
                }
            }
            console.log(e.target.innerText);
            if(e.target.innerText == '云南'){
                img.setAttribute('src','')
                tip.innerHTML = '没有找到相关内容哦！'
            }else{
                tip.innerHTML = ''
                img.setAttribute('src','./graph/'+e.target.innerText+'.png')
            }
            e.target.classList.add('actived');

        }
    }
</script>